(function () {
  const provinceEl = document.querySelector("#province");
  const cityEl = document.querySelector("#city");
  const schoolEl = document.querySelector("#school");

  const init = () => {
    initProvince();
  };

  function initProvince() {
    for (const key in province) {
      if (Object.prototype.hasOwnProperty.call(province, key)) {
        const item = province[key];
        provinceEl.innerHTML += `<option value=${key}>${item}</option>`;
      }
    }
  }

  provinceEl.addEventListener("change", function () {
    console.log("first");
    cityEl.innerHTML = "";
    schoolEl.innerHTML = "";
    const provinceValue = this.value;
    const curCity = city[provinceValue];
    for (const key in curCity) {
      if (Object.prototype.hasOwnProperty.call(curCity, key)) {
        const item = curCity[key];
        cityEl.innerHTML += `<option value=${key}>${item}</option>`;
      }
    }

    const curSchool = allschool[cityEl.value];
    for (const key in curSchool) {
      if (Object.prototype.hasOwnProperty.call(curSchool, key)) {
        const item = curSchool[key];
        schoolEl.innerHTML += `<option value=${key}>${item}</option>`;
      }
    }
  });

  cityEl.addEventListener("change", function () {
    schoolEl.innerHTML = "";
    const cityValue = this.value;
    const curSchool = allschool[cityValue];
    for (const key in curSchool) {
      if (Object.prototype.hasOwnProperty.call(curSchool, key)) {
        const item = curSchool[key];
        schoolEl.innerHTML += `<option value=${key}>${item}</option>`;
      }
    }
  });

  init();
})();
